<template>
  <div class="component-detail-list">
    <el-row :gutter="20">
      <el-form ref="requestParams"
               :model="requestParams"
               label-width="80px">
        <p>构件清单</p>
        <el-col :span="24"
                class="table-box">
          <el-table :data="tableData"
                    :highlight-current-row="true"
                    border
                    :header-cell-style="{ background: '#f5f5f5' }">
            <el-table-column type="index"
                             label="序号"
                             sortable
                             width="100"
                             align="center"
                             show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="base_name"
                             label="基地名称"
                             align="center"
                             show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="cpTypeName"
                             label="构件类型"
                             align="center"
                             show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="cp_num"
                             label="构件编号"
                             align="center"
                             show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="cur_step_name"
                             label="构件状态"
                             align="center"
                             show-overflow-tooltip>
            </el-table-column>
            <el-table-column label="操作"
                             align="center"
                             width="160px">
              <template slot-scope="scope">
                <el-button type="text"
                           @click="onDetail(scope.row)">详情</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
        <el-col :span="24">
          <el-pagination @current-change="handlePageChange"
                         @size-change="handleSizeChange"
                         :current-page="requestParams.page"
                         :page-size="requestParams.page_size"
                         layout="total,sizes,prev, pager, next, jumper"
                         :total="total"
                         align="center">
          </el-pagination>
        </el-col>
        <ComponentDetailListDialog v-if="lookComponentListVisible==true"
                                   :compObjRow.sync="compObjRow"
                                   :lookComponentListVisible.sync="lookComponentListVisible"></ComponentDetailListDialog>
      </el-form>
    </el-row>
  </div>
</template>

<script>
import { standardCodeApi } from '@/services/StandardCode';
import { projectDecomApi, ProjectListApi, ProDesignDecomApi } from '@/services/ProjectCenter'
import ComponentDetailListDialog from './ComponentDetailListDialog';//构件清单
export default {
  props: {
    resolveWbsObj: {
      type: Object,
      default: () => {
        return {}
      }
    },
  },
  components: {
    ComponentDetailListDialog,//构件清单
  },
  data () {
    return {
      cpTypeMap: new Map(),//构件类型
      compObjRow: {},//构件清单表格数据当前行的对象
      lookComponentListVisible: false,
      total: 0,
      cpTypeArr: [],
      requestParams: {
        resolve_wbs_id: '',
        project_id: '',
        is_page: 1,
        page: 1,
        page_size: 10
      },
      tableData: [],
    }
  },
  methods: {
    getCompProjectRela () {
      ProDesignDecomApi.getCompProjectRela({
        params: this.requestParams
      }).then((res) => {
        if (res.data) {
          this.tableData = res.data.list;
          if (this.tableData.length > 0) {
            this.tableData.map((item) => {
              item.cpTypeName = this.cpTypeMap.get(item.cp_type).name;
            })
          };
          console.log('tableData=', this.tableData, 'cpTypeMap=', this.cpTypeMap)
          this.total = res.data.total_count;
        }
      }).catch((err) => {
        console.log(err)
      })
    },
    onDetail (row) {//详情
      this.compObjRow = Object.assign({}, row);//拷贝
      this.lookComponentListVisible = true;
    },
    handleSizeChange (pageSize) {//当前页最多显示的条数
      this.requestParams.page_size = pageSize;
      this.handlePageChange(1);//刷新
    },
    handlePageChange (page) {//当前页改变时触发的事件
      this.requestParams.page = page;
      this.getCompProjectRela();//刷新
    },
    initFunc () {//初始函数
      let wbsId = this.resolveWbsObj.resolve_wbs_id;
      let proId = this.resolveWbsObj.project_id;
      if (wbsId) {
        this.requestParams.project_id = proId;
        this.requestParams.resolve_wbs_id = wbsId;
        this.handlePageChange(1);
      } else {
        this.tableData = []
        this.requestParams = this.$options.data().requestParams;//重置
      }
    },
    getConstructType () {
      let constructTypeMap = window.localStorage.getItem('assComponentTypeMap');//构件类型
      if (constructTypeMap) {
        this.cpTypeArr = JSON.parse(constructTypeMap);//构件类型下拉数据
        this.cpTypeArr.map((item, ind, arr) => {
          this.cpTypeMap.set(item.value, item)
        })
      } else {
        this.getStandardCode();//结构类型
      }
    },
    // 结构类型初始化标准码
    getStandardCode () {
      return standardCodeApi
        .getCodeNoToken({
          data: {
            code_type: "assComponentType",
            system_no: "ass",
            no_token: "1"
          }
        }).then(res => {
          if (res.data) {
            console.log('1111测试res=', res)
            this.cpTypeArr = res.data[0].sub_data;
            this.cpTypeArr.map((item, ind, arr) => {
              this.cpTypeMap.set(item.value, item)
            })
            window.localStorage.setItem('assComponentTypeMap', JSON.stringify(this.cpTypeArr))
          }
        },
          err => {
            console.log(err);
          }
        );
    }
  },
  watch: {
    resolveWbsObj (n, o) {
      this.getConstructType();//构件类型
      this.initFunc();//初始函数
    }
  },
  created () {
    this.getConstructType();//构件类型
    this.initFunc();//初始函数
  }
}
</script>

<style scoped lang="scss">
.component-detail-list {
  padding-top: 30px;
  padding-bottom: 20px;
  padding-left: 40px;
  p {
    font-size: 16px;
    font-weight: bold;
    padding-bottom: 20px;
    padding-left: 10px;
  }
}
</style>